<template>
  <div class="checkPlanDetail zy-content">
    <div class="title">
      <span>查看点检计划</span>
      <div class="back" @click="back">返回上一级</div>
    </div>
    <div class="titleItem">
      <span>点检对象</span>
      <div class="checkObject">
        <div v-for="(item, index) in checkObject" :key="index" class="checkObjectItem">
          <div class="checkObjectName">{{item.name}}</div>
          <div class="checkObjectValue">{{item.value}}</div>
        </div>
      </div>
      <div class="searchBox">
        <Form label-position="right" :label-width="100" class="search-form">
          <div class="label">
            <FormItem label="所属工厂" class="item">
              <Select v-model="formInline.category" filterable clearable :placeholder="`${$t('common.selectInfo')}`" >
                <Option v-for="(item,index) of category" :value="item.key" :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="生产线描述" class="item">
              <Select v-model="formInline.position" filterable clearable :placeholder="`${$t('common.selectInfo')}`" >
                <Option v-for="(item,index) of position" :value="item.key" :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="制造商" class="item">
              <Select v-model="formInline.classification" filterable clearable :placeholder="`${$t('common.inputInfo')}`" >
                <Option v-for="(item,index) of classification" :value="item.key" :key="index">{{ item.name }}</Option>
              </Select>
            </FormItem>
             <FormItem :label="`${$t('ledger.EquipmentType')}:`" class="item">
              <Input type="text" v-model="text" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="" class="item">
              <Button type="primary">{{$t('common.Query')}}</Button>
            </FormItem>
          </div>
        </Form>
        <div>
          <Table ref="selection" :columns="columns" :data="data"></Table>
          <div class="pageWrap">
            <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum" @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
          </div>
        </div>
      </div>
    </div>
    <div class="titleItem">
      <span>点检时间</span>
      <div class="checkObject">
        <div v-for="(item, index) in checkTime" :key="index" class="checkObjectItem">
          <div class="checkObjectName">{{item.name}}</div>
          <div class="checkObjectValue">{{item.value}}</div>
        </div>
      </div>
    </div>
     <div class="titleItem">
      <span>点检内容</span>
      <div class="contentTable">
        <Table ref="selection" :columns="contentColumns" :data="contentData">
          <template slot-scope="{ row }" slot="action">
              <span class="operationBtn" @click="seeDetail(row)"><Icon type="md-eye" size='18' />{{$t('common.CheckDetial')}}</span>
            </template>
        </Table>
      </div>
    </div>
    <Modal :mask-closable="false"
      v-model="visible"
      title="点检内容详情"
      class="checkContentModal"
      width='1200'
      footer-hide
      >
        <contentDetail></contentDetail>
    </Modal>
  </div>
</template>

<script>
import contentDetail from './contentDetail.vue'
export default {
  name: "checkDetail",
  components: {
    contentDetail
  },
  data() {
    return {
      formInline: {},
      text: '',
      visible: false,
      category: [
        {name: "全部", key: ""},
        {name: 'CNC', key: 'CNC'},
        {name: 'PLC', key: 'PLC'},
        {name: 'IPC', key: 'IPC'},
      ],
      position: [{name: "全部", key: ""}],
      classification: [{name: "全部", key: ""}],
      checkObject: [
        {name: '计划名称', value: 'cnc设备定期点检'},
        {name: '设备类别', value: 'cnc'},
        {name: '点检位置', value: '主轴'},
        {name: '点检分类', value: '润滑'},
      ],
      checkTime: [
        {name: '点检方式', value: '定期点检'},
        {name: '触发间隔', value: '次/日'},
        {name: '首次生成时间', value: '2021年9月15日 16:38:50'},
        {name: '计划截止时间', value: '2021年9月15日 16:38:50'},
        {name: '任务存活时间', value: '1天3小时'},
      ],
      checkContent: [
        {name: '点检内容', value: '主轴清洗'},
        {name: '点检方法', value: '主轴清洗'},
      ],
      checkStandard: [
        {name: '下限', value: '0.5'},
        {name: '上限', value: '1.0'},
        {name: '单位', value: '摄氏度'},
      ],
      checkTool: [
        {name: '物料代码', value: ''},
        {name: '使用工具', value: ''},
        {name: '规格型号', value: ''},
        {name: '品牌', value: ''},
        {name: '数量', value: ''},
        {name: '保养方式', value: ''},
      ],
      checkMaterial: [
        {name: '物料代码', value: ''},
        {name: '物料名称', value: ''},
        {name: '数量', value: ''},
        {name: '单价', value: ''},
        {name: '总价', value: ''},
      ],
      columns: [
        {title: '所属工厂', key: 'category'},
        {title: `${ this.$t('maintenance.EquipmentNo') }`, key: 'position'},
        {title: '设备名称', key: 'classification'},
        {title: '设备型号', key: 'cycle'},
        {title: '功能位置', key: 'content'},
        {title: '生产线代码', key: 'function'},
        {title: '生产线描述', key: 'describe'},
      ],
      data: [
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
        {category: '金科森', position: 'EQ100000033000037', classification: 'EQ100000033000037', cycle: 'EQ100000033000037', content: 'EQ100000033000037', function: 'A180', describe: '机加工CNC'},
      ],
      contentColumns: [
        {title: '点检内容', key: 'content'},
        {title: '点检方法', key: 'checkFunction'},
        { title: `${ this.$t('maintenance.Unit') }`, key: 'company'},
        {title: `${ this.$t('maintenance.UpperLimit') }`, key: 'up'},
        { title: `${ this.$t('maintenance.LowerLimit') }`, key: 'down'},
        {title: `${ this.$t('common.operation') }`, slot: 'action', width: 150, align: 'center'},
      ],
      contentData: [
        {content: '刀库刀套清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
        {content: '打黄油', checkFunction: '无松动', company: '--', up: '--', down: '--'},
        {content: '主轴风扇清理', checkFunction: '动作顺畅、定位准确', company: '--', up: '--', down: '--'},
      ],
      total: 64,
      pageSize: 10,
      pageNum: 1,
      pageSizeOption: [10, 20, 30, 40],
    }
  },
  methods: {
    back() {
      this.$emit('changeDetailVisible', false)
    },
    changePageNum() {},
    changePageSize() {},
    seeDetail() {
      this.visible = true;
    },
  }
}
</script>
<style lang="scss">
.checkPlanDetail {
  background: #fff;
  .title {
    display: flex;
    justify-content: flex-start;
    font-size: 20px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
    align-items: center;
    .back {
      color: #187BDB;
      font-size: 16px;
      padding-left: 20px;
      cursor: pointer;
    }
  }
  .titleItem {
    position: relative;
    font-size: 18px;
    font-weight: bold;
    padding: 10px;
    .checkObject {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      border-bottom: 2px solid #D7D7D7;
      .checkObjectItem {
        display: flex;
        flex: 0 33%;
        .checkObjectName {
          height: 40px;
          line-height: 40px;
          width: 30%;
          border: 1px solid #EEEEEE;
          background: #F5F6F7;
          text-align: right;
          padding-right: 10px;
        }
        .checkObjectValue {
          height: 40px;
          line-height: 40px;
          width: 70%;
          border: 1px solid #EEEEEE;
          padding-left: 10px;
        }
      }
    }
    .searchBox {
      .label {
        display: flex;
      }
    }
    .contentTable {
      padding: 20px;
    }
  }
  .titleItem::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 20px;
    top: 12px;
    left: 0px;
    background: #187BDB;
  }
}

</style>
